<template>
    <div class="hu_dong">
        <div class="title">
            <img @click="go_back" style="width: 25px;height: 25px;" class="left" src="../lmx/image/return.png" alt="">
            <div class="right">
                <span>互动消息</span>
                <span>举报</span>
            </div>
        </div>
        <div ref="xia" class="xia">
            <div class="main">
                <div v-for="i in 2" class="mag_one">
                    <div class="one_side">
                       <img src="../lmx/image/11.jpeg" alt="">
                       <div class="wen_ben">
                            <div class="ni_cheng">
                                <span class="user">手工客19118273</span>
                                <span class="mag">点赞</span>
                            </div>
                            <div class="time">
                                <span>2022-09-30</span>
                                <span @click="del_one">删除</span>
                            </div>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref ,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
const router = useRouter()
const xia = ref()
onMounted(()=>{
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    var vdaH = h - 50 + "px"
    const boxBa = xia.value
    boxBa.style.height = vdaH
})
function go_back(){
    router.go(-1)
}
function del_one(){
    console.log('我是删除')
}
</script>
<style scoped>
*{
    padding: 0;
    margin: 0;
}
.hu_dong{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.right{
    width: 318px;
    height: 100%;
    /* background-color: aqua; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.right>span{
    font-size: 15px;
}
.xia{
    width: 100%;
    overflow: scroll;
}
.main{
    width: 100%;
    /* height: 120%; */
    display: flex;
    flex-direction: column;
}
.mag_one{
    width: 100%;
    height: 70px;
    border-top: 6px  solid #f2f3f5;
    display: flex;
    justify-content: center;
    align-items: center;

}
.one_side{
    width: 92%;
    height: 75%;
    /* background-color: aqua; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.one_side>img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.wen_ben{
    width: 285px;
    height: 50px;
    /* background-color: blueviolet; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.ni_cheng{
    display: flex;
    align-items: center;
}
.ni_cheng>span{
    margin-right: 5px;
    font-size: 14px;
}
.ni_cheng>.mag{
    color: #999;
}
.time{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.time>span{
    font-size: 10px;
    color: #999;
}
</style>
